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1. Write a JavaScript to design a simple calculator to perform the 
following operations: sum, product, difference and quotient. 

index.html 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Simple Calculator</title> 

<script type="text/javascript"> 

var opl= 0,op2= 0,operator="",res="",from=""; 
function reset() 

{ 

document.getElementByld('res').value = ""; 
opl=0;op2=0;operator="";res="";from=""; 

} 

function insertOperand(operand) 

{ 

if(from == "calculate") 
reset(); 

else if(from == "operator") 

document.getElementByld('res').value = ""; 
document.getElementByld('res').value+=operand; 
from = "operand"; 

} 

function insertOperator(op) 

{ 

if(opl == 0) 

{ 

opl=document.getElementByld('res').value; 

} 

else 

{ 

if(from == "operand") 

{ 

calculate(); 

} 

} 

operator=op; 
from="operator"; 

} 

function calculate() 

{ 

op2=document.getElementByld('res').value; 
opl=parseInt(opl); 
op2=parseInt(op2); 
switch (operator) 

{ 

case '+':res=opl+op2; 
break; 

case :res=opl-op2; 

break; 

case '*':res=opl*op2; 
break; 
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case '/': 

if(op2 == 0) 
res=0; 

else 

res=parselnt(opl/op2); 
break; 

} 

document.getElementByld('res').value=res; 
opl=res; 
op2=0; 

operator=""; 
from="calculate"; 

} 

</script> 

<style type="text/css"> 
input {width: 100%} 
hi {text-align: center} 

</style> 

</head> 

<body onload="reset()"> 

<hl>Simple Calculator</hl> 

<table align="center" border="l"> 

<tr> 

<td colspan="5"Xinput type="text" id="res" name="res" value="" /></td> 
</ tr> 

<tr> 

<tdXinput type="button" value="7" onclick="insertOperand(' 7 ') "/X/td> 
<tdXinput type="button" value="8" onclick="insertOperand(' 8 ') " /X/td> 
<tdXinput type="button" value="9" onclick="insertOperand(' 9 ') " /X/td> 
<tdXinput type="button" value=" + " onclick="insertOperator (' + ') " /X/td> 
<tdXinput type="button" value="-" onclick="insertOperator (' - ') " /X/td> 
</ tr> 

<tr> 

<tdXinput type="button" value="4" onclick="insertOperand(' 4 ') " /X/td> 
<tdXinput type="button" value="5" onclick="insertOperand(' 5 ') " /X/td> 
<tdXinput type="button" value="6" onclick="insertOperand(' 6 ') " /X/td> 
CtdXinput type="button" value="*" onclick="insertOperator (' * ') " /X/td> 
CtdXinput type="button" value="/" onclick="insertOperator (' / ') "/X/td> 
</ tr> 

<tr> 

<tdXinput type="button" value="l" onclick="insertOperand(' 1') " /X/td> 
<tdXinput type="button" value="2" onclick="insertOperand(' 2 ') " /X/td> 
<tdXinput type="button" value="3" onclick="insertOperand(' 3 ') " /X/td> 
<tdXinput type="button" value="0" onclick="insertOperand(' 0 ') " /X/td> 
<tdXinput type="button" value="=" onclick="calculate () " /X/td> 

</ tr> 

<tr> 

<td colspan="5"Xinput type="button" size="100%" value="CLEAR" 
onclick="reset()" /> </td> 

</ tr> 

</table> 

</body> 

</html> 


ROHAN SALINS, ASST. PROF, DEPT OF CSE, SDIT 


2 





WEB TECHNOLOGY LABORATORY WITH MINI PROJECT [15CSL77] 


2018 


Output : 


ji G? localhost/progl/ 


D 


O Type here to search 


Simple Calculator 



7 

8 

9 

+ 

- 

4 

5 

6 

* 

/ 

1 

2 

3 

0 

= 

CLEAR 


(gt Pi *> 


ROHAN SALINS, ASST. PROF, DEPT OF CSE, SDIT 


3 






































































































WEB TECHNOLOGY LABORATORY WITH MINI PROJECT [15CSL77] 


2018 


2. Write a JavaScript that calculates the squares and cubes of the 
numbers from 0 to 10 and outputs HTML text that displays the resulting 
values in an HTML table format. 

index.html 

<!DOCTYPE html> 

Chtml lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Program for Squares and Cubes</title> 

<style type="text/css"> 

table,hi {text-align: center} 

</style> 

</head> 

<body> 

<hl>Program to find Square and Cube</hl> 

<script type="text/javascript"> 

var mytable="<table border='l' align='center'> <tr> <th>Number</th> 
<th>Square</th> <th>Cube</th> </tr>"; 
var square= 0,cube=0; 
for(var i=0;i<=10;i++) 

{ 

square=i*i; 
cube=i*i*i; 

mytable+="<trXtd>"+i+"</tdXtd>"+square+"</td> 

< td> "+cube+"</ tdX / tr > " 

} 

mytable+="</table>"; 
document.write(mytable); 

</script> 

</body> 

</html> 


Output : 


Program to find Square and Cube 


Number 

Square 

Cube 

0 

0 

0 

1 

1 

1 

2 

4 

8 

3 

9 

27 

4 

16 

64 

5 

25 

125 

6 

36 

216 

7 

49 

343 

8 

64 

512 

9 

81 

729 

10 

100 

1000 


m 


o Type here to search 


0 ® Pi E 


ROHAN SALINS, ASST. PROF, DEPT OF CSE, SDIT 


4 








































WEB TECHNOLOGY LABORATORY WITH MINI PROJECT [15CSL77] 


2018 


3. Write a JavaScript code that displays text "TEXT-GROWING" with 
increasing font size in the interval of 100ms in RED COLOR, when the 
font size reaches 50pt it displays "TEXT-SHRINKING" in BLUE color. 
Then the font size decreases to 5pt. 


index.html 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Prog for Text Animation</title> 
<script type="text/javascript"> 
function animate () 


{ 

var val=window.getComputedStyle(document.getElementByld('text')).fontSize; 
var fontsize=parseInt(val); 
var state="growing"; 

var timer=setlnterval( textanimate, 100); 
function textanimate () 

{ 

if(state=="growing") 

{ 

fontsize++; 

document.getElementByld('text').innerHTML="TEXT GROWING"; 
document.getElementByld('text').style.color="red"; 
document.getElementByld('text').style.fontSize=fontsize+"pt"; 
} 

if(state=="shrinking") 

{ 

fontsize--; 

document.getElementByld('text').innerHTML="TEXT SHRINKING"; 
document.getElementByld('text').style.color="blue"; 
document.getElementByld('text').style.fontSize=fontsize+"pt"; 
} 

if(fontsize==50) 

{ 

state="shrinking" 

} 

if(fontsize==5) 

{ 

clearlnterval(timer); 


} 

} 

} 

</script> 

</head> 

<body onload=" animate ()"> 

<hl style="text-align: center"> 

Program for Increasing / Decreasing size of a text 
</hl> 

<p style="text-align: center;" id="text"X/p> 

</body> 

</html> 


ROHAN SALINS, ASST. PROF, DEPT OF CSE, SDIT 


5 





WEB TECHNOLOGY LABORATORY WITH MINI PROJECT [15CSL77] 


2018 


Output : 



Program for Increasing / Decreasing size of a text 


TEXT GROWING 


(a) Animation for text growing 



Program for Increasing / Decreasing size of a text 


TEXT SHRINKING 


(b) Animation for text shrinking 
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4. Develop and demonstrate a HTML5 file that includes JavaScript 
script that uses functions for the following problems: 


a. Parameter: A string 

b. Output: The position in the string of the left-most vowel 

c. Parameter: A number 

d. Output: The number with its digits in the reverse order 

index.html 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Program to find leftmost vowel and digits in reverse order</title> 
<script type="text/javascript"> 
function validate () 

{ 

var inp=document.getElementByld('val').value; 
if(isNaN(inp)) 

findVowel (inp); 

else 

findReverse (inp); 

} 

function findVowel (inp) 

{ 

var str=inp.toLowerCase(); 

var pos=0,ch=""; 

for(var i=0;i<str.length;i++) 

{ 

ch=str.charAt(i); 

if(ch=="a"||ch=="e"||ch=="i"||ch=="o"||ch=="u") 

{ 

pos=i+l; 
break; 

} 

} 

if(pos==0) 

alert("Vowel not found"); 

else 

alert("Position of Left Most Vowel in the string : "+pos); 

} 

function findReverse (inp) 

{ 

var num=parselnt(inp); 
var temp=num; 
var rem= 0,rev= 0; 
while(num>0) 

{ 

rem=num%10; 
rev=rev*10+rem; 
num=parselnt(num/10); 

} 

alert("Number : "+temp+"\nReverse Order : "+rev); 

} 

</script> 

</head> 
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<body> 

<hl> 

Program to find left most vowel or Digits in reverse order 

</hl> 

<input type="text" name="val" id="val" placeholder="Enter String or Digits"> 
<input type="button" value="submit" onclick="validate()"> 

</body> 

</html> 

Output : 


Program to find left most vowel or Digits in reverse order 


|web program ~ submit 


Position of Left Most Vowel in the string : 2 


OK 


(a) When you enter the string as input 



Program to find left most vowel or Digits in reverse order 

12345 j submit 


Number: 12345 

Reverse Order 

:54321 


OK 




(b) When you enter the digits as input 
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5. Design an XML document to store information about a student in an 
engineering college affiliated to VTU. The information must include USN, 
Name, and Name of the College, Branch, Year of Joining, and email id. Make up 
sample data for 3 students. Create a CSS style sheet and use it to display 
the document. 

5. xml 

<?xml version="l.0" encoding="UTF-8"?> 

<?xml-stylesheet type="text/css" href="5.css"?> 

<!DOCTYPE student [ 

<!ELEMENT student_info (hi,h2+,ad+)> 

<!ELEMENT ad (label)> 

<!ELEMENT usn (#PCDATA)> 

<!ELEMENT name (#PCDATA)> 

<!ELEMENT col (#PCDATA)> 

<!ELEMENT branch (#PCDATA)> 

<!ELEMENT year (#PCDATA)> 

<!ELEMENT email (#PCDATA)> 

<!ELEMENT label (#PCDATA|usn|name|col|branch|year|email)*> 

<!ELEMENT h2 (#PCDATA)> 

<!ELEMENT hi (#PCDATA)>]> 

<student_info> 

<hl>Student information</hl> 

<h2>Studentl</h2> 

<adXlabel>USN: <usn>4SHllCS001</usn></labelX/ad> 

<adXlabel>NAME: <name>AAA</nameX/labelX/ad> 

<adX 1 abe 1 >COLLEGE : <col>SDIT</colX/labelX/ad> 

<adXlabel>BRANCH: <branch>CSE</branchX/labelX/ad> 

<adXlabel>YEAR: <year>2011</yearX/labelX/ad> 

<adXlabel>EMAIL: <email>abc@gmail. com</emailX/labelX/ad> 

<h2>Student2</h2> 

<adXlabel>USN: <usn>4SHHIS002</usnX/labelX/ad> 

<adXlabel>NAME: <name>BBB</nameX/labelX/ad> 

<adX 1 abe 1 >COLLEGE : <col>SDIT</colX/labelX/ad> 

<adXlabel>BRANCH: <branch>ISE</branchX/labelX/ad> 

<adXlabel>YEAR: <year>2012</yearX/labelX/ad> 

<adXlabel>EMAIL: <email>ef g@gmail. com</emailX/labelX/ad> 

<h2>Student3</h2> 

<adXlabel>USN: <usn>4SHHCS003</usnX/labelX/ad> 

<adXlabel>NAME: <name>CCC</nameX/labelX/ad> 

<adX 1 abe 1 >COLLEGE : <col>SDIT</colX/labelX/ad> 

<adXlabel>BRANCH: <branch>CSE</branchX/labelX/ad> 

<adXlabel>YEAR: <year>2013</yearX/labelX/ad> 

<adXlabel>EMAIL: <email>hi j @gmail. com</emailX/labelX/ad> 

</student info> 
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5.css 


hi {color:green;font-size:50px;} 

h2 {display:block;margin-left:40px;color:brown;font-size:40px;} 
ad {display:block;margin-left:80px/margin-top:2Opx;color:blue;font- 
size :20px;} 

usn {color:red;margin-left:20px;font-size:20px;} 
name {color:red/margin-left:2Opx;font-size:2Opx;} 
col {color:red/margin-left:2Opx;font-size:2Opx;} 
branch {color:red/margin-left:2Opx;font-size:2Opx;} 
year {color:red;margin-left:2Opx;font-size:2Opx;} 
email {color:red/margin-left:2Opx;font-size:2Opx;} 


Output : 



Student information 

Studentl 


USN: 4SH11CS001 
NAME: AAA 
COLLEGE: SDIT 
BRANCH: CSE 
YEAR: 2011 
EMAIL: abc@gmail.com 

Student2 

USN: 4SH11CS002 
NAME: BBB 
COLLEGE: SDIT 
BRANCH: CSE 
YEAR: 2011 
EMAIL: efg@gmail.com 

Student3 

USN: 4SH11CS003 
NAME: CCC 
COLLEGE: SDIT 
BRANCH: CSE 
YEAR: 2011 
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6.Write a PHP program to keep track of the number of visitors visiting the 
web page and to display this count of visitors, with proper headings. 

index.php 


<html> 

<head> 

<title>Visitors Count</title> 

<style type="text/css"> 

hl,h2 {text-align: center} 

</style> 

</head> 

<body> 

<hl>Welcome to MY WEB PAGE</hl> 

<?php 

$file="count.txt"; 

$handle=fopen($file,'r') or die("Cannot Open File : $file"); 
$count=fread($handle,10) ; 
fclose($handle); 

$count++; 

echo "<h2>No of visitors who visited this page : $count </h2>"; 
$handle=fopen($file,'w') or die("Cannot Open File : $file"); 
fwrite($handle,$count); 
fclose($handle); 

?> 

</body> 

</html> 


Instruction : 

Create an empty file named count.txt in the same folder before executing. 


Output : 



(V localhost/prog6/ 


Welcome to MY WEB PAGE 

No of visitors who visited this page : 13 
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7. Write a PHP program to display a digital clock which displays the 
current time of the server. 

index.php 


<html> 

<head> 

<meta http-equiv="refresh" content="l"> 
<title>Digital Clock</title> 

<style type="text/css"> 

hi {text-align: center} 

</style> 

</head> 

<body> 

<?php 

echo "<hl>Digital Clock</hl>"; 
echo "<hr/>"; 

echo "<hl>".date('h:i:s A')."</hl>"; 
echo "<hr/>"; 

?> 

</body> 

</html> 


Output : 
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8. Write the PHP programs to do the following: 

a. Implement simple calculator operations. 

b. Find the transpose of a matrix. 

c. Multiplication of two matrices. 

d. Addition of two matrices. 

8a.html 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Simple Calculator</title> 

</head> 

<body> 

<form action="8a.php" method="post"> 

<hl>Simple Calculator</hl> 

<p>First Operand: <input type="text" name="opl" /></p> 

<p>Choose Operator: 

<input type="radio" name="operator" checked="checked" value="+" /> Add(+) 
Cinput type="radio" name="operator" value="-" /> Subtract(-) 
<input type="radio" name="operator" value="*" /> Multiply(*) 
<input type="radio" name="operator" value="/" /> Divide(/) 

</p> 

<p>Second Operand: <input type="text" name="op2"></p> 

<p><input type="submit" name="submit" value="Submit"> 

<input type="reset" name="submit" value="Reset"X/p> 

</form> 

</body> 

</html> 


8a.php 


<html> 

<head> 

<title>Result Page</title> 
<style type="text/css"> 

hl,h2 {text-align: center} 
</style> 

</head> 

<body> 

<?php 

$opl=$_POST['opl']; 

$op2=$_POST['op2']; 
$operator=$_POST['operator']; 
switch($operator) 

{ 

case '+':$res=$opl+$op2; 
break; 

case '-':$res=$opl-$op2; 
break; 

case '*':$res=$opl*$op2; 
break; 

case '/':if($op2==0) 

$res=0; 
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else 

$res=$opl/$op2; 
break; 

} 

echo "<hl>Simple Calculator</hl>"; 
echo "<h2>".$opl.$operator.$op2."=".$res."</h2>"; 
?> 

</body> 

Output : 


Simple Calculator 


First Operand: [35 


Choose Operator: O Add(+) O Subtract(-) M Multiply (*) O Divide(/) 


Second Operand: [42 


Submit Reset 


(a) HTML input page 
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8b.php 

<?php 

$mat=Array(Array(1,2), 

Array(4,5), 

Array(7,8)); //Initializing Array in PHP 
$transpose=Array(); //Creating empty array in PHP 

echo "<htmlXheadXtitle>Matrix Transpose</titleX/headXbody>" ; 

echo "<hl>Matrix is:<br/>"; 
for($i = 0; $i < count($ mat); $i++) 

{ 

for ($j = 0; $j < count ($mat[0]); $j++) 

{ 

echo $mat[$i][$j] . " 

} 

echo "</br/>"; 

} 

echo "</hl>"; 


for($i = 0; $i < count($mat); $i++) //calculation for Transpose 

for($j = 0; $j < count ($mat[0]); $j++) 

{ 

$transpose[$j][$i]=$mat[$i][$j]; 

} 


echo "<hl>Transpose of a Matrix is:<br/>"; 
for($i = 0; $i < count ($transpose); $i++) 

{ 

for ($j = 0; $j < count ($transpose[0]); $j++) 

{ 

echo $transpose[$i][$j] . " 

} 

echo "<br/>"; 

} 

echo "</hl>"; 

echo "</bodyX/html>" ; 

?> 

Output : 



Matrix is: 


1 2 
4 5 
7 8 

Transpose of a Matrix is: 
14 7 
2 5 8 
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8c.php 

<?php 

$matl=Array(Array(1,2) , 

Array(3,4) , 

Array(5,6)); //initializing 2x3 matrix 

$mat2=Array(Array(2,4,8), //initializing 3x2 matrix 

Array(1,3,5)); 

echo "<htmlXheadXtitle>Matrix Multiplication</titleX/headXbody>" 

if (count ($matl [0]) \=count ($mat2) ) //column (1 st matrix) != row(2 nd 

{ 

echo "<hl>Incompatible Matrices</hl>"; 
exit(0); 

} 

$res=array(); 

echo "<hl>Matrix A:<br/>"; 

for($i = 0; $i < count ($matl); $i++) 

{ 

for ($j = 0; $j < count ($matl[0]); $j++) 

{ 

echo $matl[$i][$j] . " 

} 

echo "<br/>"; 

} 

echo "</hl>"; 

echo "<hl>Matrix B:<br/>"; 

for($i = 0; $i < count ($mat2); $i++) 

{ 

for ($j = 0; $j < count ($mat2[0]); $j++) 

{ 

echo $mat2[$i][$j] . " 

} 

echo "<br/>"; 

} 

echo "</hl>"; 

for($i = 0; $i < count ($matl); $i++) 

for($j = 0; $j < count ($mat2[0]); $j++) 

{ 

$res[$i][$j]=0; 

for($k=0;$k<count($mat2);$k++) 

$res[$i] [$j]=$res[$i] [$j]+$matl[$i] [$k]*$mat2[$k] [$j] ; 

} 


echo "<hl>A x B:<br/>"; 

for($i = 0; $i < count($ res); $i++) 

{ 

for ($j = 0; $j < count($ res); $j++) 

{ 

echo $res[$i][$j] . " 

} 

echo "<br/>"; 


matrix) 
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} 

echo "</hl>"; 

echo "</bodyX/html>" ; 


Output : 


Matrix A: 
12 
34 
56 

Matrix B: 

248 

135 

A x B: 

4 10 18 
10 24 44 
16 38 70 


8d.php 


<?php 

$matl=Array(Array(1,2), 

Array(3,4) , 

Array(5,6)) ; 

$mat2=Array(Array(1,1), 

Array(2,2) , 

Array(3,3)) ; 

echo "<htmlXheadXtitle>Matrix Addition</titleX/headXbody>" ; 

if( (count ($matl)! =count ($mat2))|| (count ($matl[0])! =count ($mat2[0]))) 
{ 

echo "<hl>Incompatible Matrices</hl>"; 
exit(0); 

} 

echo "<hl>Matrix A:<br/>"; 
for($i=0; $±<count ($matl);$i++) 

{ 

for ($j = 0; $j < count ($matl[0]); $j++) 

{ 

echo $matl[$i][$j] . " 

} 

echo "<br/>"; 

} 

echo "</hl>"; 
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echo "<hl>Matrix B:<br/>"; 

for($i = 0; $i < count ($mat2); $i++) 

{ 

for ($j = 0; $j < count ($mat2[0]); $j++) 

{ 

echo $mat2[$i][$j] . " 

} 

echo "<br/>"; 

} 

echo "</hl>"; 

$res=array(); 

for($i = 0; $i < count ($matl); $i++) 

for($j = 0; $j < count ($matl[0]); $j++) 

{ 

$res[$i][$j]=$matl[$i][$j]+$mat2[$i][$j]; 

} 


echo "<hl>A + B :<br/>"; 

for($i = 0; $i < count($ res); $i++) 

{ 

for ($j =0; $j < count ($res[0]); $j++) 

{ 

echo $res[$i][$j] . " 

} 

echo "<br/>"; 

} 

echo "</hl>"; 


Output : 
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9. Write a PHP program named states.py that declares a variable states with 
value "Mississippi Alabama Texas Massachusetts Kansas", write a PHP program 
that does the following: 

a) Search for a word in variable states that ends in xas. Store this word 
in element 0 of a list named statesList. 

b) Search for a word in states that begins with k and ends in s. Perform a 
case-insensitive comparison. [Note: Passing re.las a second parameter 
to method compile performs a case-insensitive comparison.] Store this 
word in elementl of statesList. 

c) Search for a word in states that begins with M and ends in s. Store 
this word in element 2 of the list. 

d) Search for a word in states that ends in a. Store this word in element 
3 of the list. 


index.php 

<html> 

<head> 

<title>Pattern Matching using python</title> 

</head> 

<body> 

<?php 

$res=shell_exec("python PythonServer/states.py"); 

$states=explode("\n",$res); //in python print embed \n at the end 

echo "Statement is : <b>$states[4]</b><br/>"; 
echo "Word that end with xas : <b>$states[0]</b><br/>"; 
echo "Word that Starts with k and end with s (Case Insensitive): 
<b>$states[1]</b><br/>"; 

echo "Word that Starts with M and end with s : <b>$states[2]</b><br/>"; 
echo "Word that end with a : <b>$states[3]</b>"; 

?> 

</body> 

</html> 


States.py 

import re 

states="Mississippi Alabama Texas Massachusetts Kansas" 
statesArr=states.split() # splits the sentence into words 

statesList=list() # Creates an empty List 

for val in statesArr: 

if(re.search('xas$',val)): #note: Indentation is imp in python 

statesList.append(val) 

for val in statesArr: 

if(re.search(' A k.*s$',val,re.I)): 
statesList.append(val) 

for val in statesArr: 

if(re.search(' A M.*s$',val)): 
statesList.append(val) 

for val in statesArr: 

if(re.search('a$',val)): 
statesList.append(val) 
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for val in statesList: 
print(val) 

print(states); 


Instruction : 

Install Python in terminal / command prompt. 

Create a folder named "PythonServer" in the same directory where 
"index.php" has been located. And then place the "states.py" file inside 
"PythonServer" folder. 

This is to assume that "state.py" has been fetched from some python 
server, which has been located somewhere on the internet. 


Output : 



Statement is : Mississippi Alabama Texas Massachusetts Kansas 
Word that end with xas : Texas 

Word that Starts with k and end with s (Case Insensitive): Kansas 
Word that Starts with M and end with s : Massachusetts 
Word that end with a : Alabama 
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10. Write a PHP program to sort the student records which are stored in the 
database using selection sort. 

index.php 

<html> 

<head> 

<title>Select Sort on student records</title> 

<style type="text/css"> 

hi {text-align: center} 

</style> 

</head> 

<body> 

<hl>Merge Sort on sample student data</hl> 

<form action="" method="post"> 

<hl>Sort By : 

<select name="field"> 

<option value="" disabled selected>Choose Field</option> 
<option value="name">Name</option> 

<option value="usn">USN</option> 

<option value="year">Year</option> 

<option value="marks">Marks</option> 

<option value="coll">College</option> 

</select> 

</hl> 

<hl> 

Cinput type="submit" name="submit" value="Submit"> 

<input type="reset" name="reset" value="Reset"> 

</hl> 

</form> 

<?php 

function selection_sort($data,$keys) 

{ 

for($i=0; $±<count ($data)-1; $i++) 

{ 

$min = $i; 

for($j=$i+l; $j<count($data); $j++) 

{ 

if ($data[$j]<$data[$min]) 

{ 

$min = $ j ; 

} 

} 

$data = swap_jpositions ($data, $i, $min); 

$keys = swap_jpositions ($keys, $i, $min); 

} 

return $keys; 

} 

function swap_j?ositions ($datal, $left, $right) 

{ 

$temp = $datal[$right]; 

$datal[$right] = $datal[$left]; 

$datal[$left] = $temp; 
return $datal; 

} 
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include 'sql.php'; 

$str="select * from studentdetails"; 

$res=mysqli_query ($sql,$str); 

$field="none"; 

$myarr=[]; 

$original=[]; 

$i=l ; 

while ($arr=mysqli_fetch_assoc($res)) 

{ 

$myarr[]=$arr; 

} 

if(isset($_POST['submit']) && isset($_POST['field'])) 

{ 

$field=$_POST['field']; 

$original=array_column($myarr,$field,'id'); 

// Create Associate array with (key,value)=('id',$feild) 
$orginalKey=array_keys($original); 

$originalVal=array_values($original); 
$sortedkeys=selection_sort($originalVal,$orginalKey); 
$myarr=[]; 

foreach ($sortedkeys as $key) 

{ 

$str="select * from studentdetails WHERE id='$key'"; 
$res=mysqli_query ($sql,$str) ; 

$myarr[] =mysqli_fetch_assoc($ res) ; 

} 

} 

?> 


<table border="l" width="80%" align="center"> 
<tr> 


<th colspan="6"> 

Student Details [Sorted by: <?php echo 
</ th> 

</ tr> 

<tr> 

<th>No</th> 

<th>Name</th> 

<th>USN</th> 

<th>Year</th> 

<th>Marks</th> 

<th>College</th> 

</tr> 

<?php foreach ($myarr as $arr): ?> 

<tr> 


<tdX?php 
<tdX?php 
<tdX?php 
<td><?php 
<tdX?php 
<tdX?php 
</ tr> 

<?php endforeach; 
</table> 

</body> 

</html> 


echo $i++; ?X/td> 
echo $arr [' name ' ] ; ?X/td> 
echo $arr [' usn' ] ; ?X/td> 
echo $arr [' year' ] ; ?X/td> 
echo $arr [ 'marks ' ] ; ?X/td> 
echo $arr [' coll' ] ; ?X/td> 

?> 


$field;?>] 
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sql.php 


<?php 

$sql=mysqli_connect ("localhost","root",,"proglOdb"); 
?> 


Database Procedure : 


1. Creating Database : 

CREATE DATABASE proglOdb; 

2. Creating table : 

CREATE TABLE studentdetails ( 
id int AUTO_INCREMENT, 
name varchar(lOO), 
usn varchar(50), 
year int, 
marks int, 
coll varchar(200), 

PRIMARY KEY (id) 

) ; 

3. Insert 5 sample data into table : 

INSERT INTO studentdetails VALUES 

(0,'Raj','4shl2cs001',2012,75,'Shree Devi Institute of Tech'), 

(0,'Suresh','4shl0cs002',2010,55,'Shree Devi Institute of Tech'), 
(0,'Ram','4srllcs001',2011,75,'Srinivas Institute of Tech'), 

(0,'Som','4sjl5cs001',2015,35,'StJoseph Collge of Engg'), 

(0,'Bhim','4cal4cs001',2014,75,'Canara Collage of Engg'); 


Output : 


Merge Sort on sample student data 
Sort By : 


Submit 


Choose Field 


Reset 


Student Details [Sorted by: none] 

No 

Name 

USN 

Year 

Marks 

College 

1 

Raj 

4shl 2cs001 

2012 

75 

Shree Devi Institute of Tech 

2 

Suresh 

4shl0cs002 

2010 

55 

Shree Devi Institute of Tech 

3 |Ram 

4srl 1 csOOl 

2011 

75 

Srinivas Institute of Tech 

4 Som 

4sjl 5cs001 

2015 ^5 

StJoseph Collge of Engg 

5 Bhim 

4cal4cs001 

2014 [75 

Canara Collage of Engg 


(a) Without applying any sort 
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Merge Sort on sample student data 


Sort By 


Choose Field 


Submit Reset 


Student Details [Sorted by: usn] 


No 

Name 

USN 

Year 

Marks 

College 

1 

Bhim 

4cal4cs001 

2014 

75 

Canara Collage of Engg 

2 jSuresh 

4shl0cs002 

2010 

55 

Shree Devi Institute of Tech 

3 Raj 

4shl2cs001 

2012 

75 

Shree Devi Institute of Tech 

4 

Som 

4sjl5cs001 

2015 

35 

StJoseph Collge of Engg 

5 

Ram 

4srl 1 csOOl 

2011 

75 

Srinivas Institute of Tech 


(b) Sorting the data based on USN 



E3 


Merge Sort on sample student data 
Sort By: 


Choose Field 


Submit Reset 


Student Details [Sorted by: marks] 


No 

Name 

USN 

Year 

Marks 

College 

1 

Som 

4sjl5cs001 

2015 

35 

StJoseph Collge of Engg 

2 

Suresh 

4shl 0cs002 

2010 

55 

Shree Devi Institute of Tech 

3 Ram 

4srl 1 csOOl 

2011 

75 

Srinivas Institute of Tech 

4 Raj 

4shl 2cs001 

2012 

75 

Shree Devi Institute of Tech 

5 Bhim 

4cal4cs001 

2014 

75 

Canara Collage of Engg 


O T -"/pe here to search 


(c) Sorting the data based on MARKS 
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